<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            position: relative;
        }
        #box{
            width: 1000px;
            border:2px solid #000;
            position: absolute;
            top:0; bottom:0;
            left:0; right:0;
            margin: auto;
            float:left;
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
        }
        #box>section{
            height:400px;
            width:300px;
            /* float: left;           */
        }
        #box>section>img{
            width:100%;
        }
        #box>section>p{
            font-size: 13px;
            padding: 5px 0;
        }
        #box>section>span{
            display: inline-block;
            font-size: 13px;
            padding: 5px 10px 0 0;

        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>
<script>
    const box = document.querySelector("div");


    const xhr = new XMLHttpRequest();
    xhr.open("get",'http://localhost:8888/goods/list',true);
    xhr.send();
    xhr.onload = function(){
        const data = JSON.parse(xhr.response).list
        

        data.forEach(item => {
            console.log(item);
            const content = document.createElement("section");
            content.innerHTML = `<img src="${item.img_big_logo}" alt="">`;
            content.style.cssText = "border:1px solid yellowgreen;margin:10px;";
            box.appendChild(content) ;

            const p = document.createElement("p");
            p.innerHTML += `&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp${item.title}`;
            content.appendChild(p) ;

            const price = document.createElement("span");
            price.innerHTML += `原价：${item.price}`;
            content.appendChild(price);

            const current_price = document.createElement("span");
            current_price.innerHTML += `现价：${item.current_price}`;
            content.appendChild(current_price);


        });


    }

</script>